<docs>
  <docs-title>饼图一</docs-title>
  <docs-desc> 公共配置：xAxis、yAxis、tooltip、series </docs-desc>
 </docs>

<script>
import chart from "../echart.vue";

export default {
  extends: chart,
  data() {
    return {
      commonOptions: null
    };
  },
  created() {
    this.initCommonOptions();
  },
  methods: {
    initCommonOptions() {
      this.commonOptions = {
        xAxis: {
          show: false
        },
        yAxis: {
          show: false
        },
        tooltip: {
          trigger: "item"
        },
        series: [
          {
            type: "pie",
            startAngle: 90,
            radius: ["60%", "75%"],
            center: ["50%", "50%"],
            data: [
              { value: 1048, name: "Search Engine" },
              { value: 735, name: "Direct" },
              { value: 580, name: "Email" },
              { value: 484, name: "Union Ads" },
              { value: 300, name: "Video Ads" }
            ]
          },
          {
            type: "gauge",
            radius: "65%",
            center: ["50%", "50%"],
            startAngle: 0,
            endAngle: 360,
            splitNumber: 60,
            splitLine: {
              show: true,
              length: 2,
              lineStyle: {
                width: 4,
                color: "#2D64DE"
              }
            },
            axisLine: {
              show: false
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: false
            },
            pointer: {
              show: false
            },
            detail: {
              show: false
            }
          }
        ]
      };
    }
  }
};
</script>
